<script setup lang="ts">
defineOptions({
  name: "ALL_ENERGY_ENERGYREPORT_RISK_OPP"
});

import { ref, onActivated, onMounted, onUnmounted, markRaw } from "vue";
import { useRouter } from "vue-router";
import { PxMessage } from "px-ui";
import commonTable from "@/views/common/components/commonTable/index.vue";
import commonSearch from "@/views/common/components/commonSearch/index.vue";
import { queryRiskOpportunityList, deleteRiskOpportunity } from "@/api/energy/overView";
import { View, Edit, Delete } from "@px-ui/icons-vue";
import { useTableCloumns, useSearchOption } from "./risk_opp_hooks";
import { useUpdateDomHeight, useCancelUpdateDomHeight } from "@/hooks/useCommon";
import { useMessageBox } from "@/hooks/useCommon";

const router = useRouter();

const searchLoading = ref<boolean>(false);
const gap = 78;
const defaultHeight = 606;
const objectModelTableRef = ref<HTMLElement | null>(null);
const commonTableRef = ref<CommonTable.TableRefType>(null);
const commonSearchRef = ref<CommonSearch.SearchFormRefType>(null);
const scrollbarHeight = ref<number>(defaultHeight);
const searchOption = ref<Array<CommonSearch.SearchOption>>(useSearchOption());
const params = ref<any>({});

const operationOptions: Array<CommonTable.operationOptionItemType> = [
  {
    content: "查看",
    auth: "ALL_ENERGY_ENERGYREPORT_RISK_OPP_CHECK_BTN",
    icon: markRaw(View),
    click: (scope: any) => check(scope)
  },
  {
    content: "编辑",
    auth: "ALL_ENERGY_ENERGYREPORT_RISK_OPP_EDIT_BTN",
    icon: markRaw(Edit),
    click: (scope: any) => edit(scope)
  },
  {
    content: "删除",
    auth: "ALL_ENERGY_ENERGYREPORT_RISK_OPP_DLETE_BTN",
    icon: markRaw(Delete),
    type: "danger",
    click: (scope: any) => del(scope)
  }
];

let defaultParams: any = {};
let currentParams: any = {};

const updateParams = () => {
  params.value = { ...defaultParams, ...currentParams };
};

const submitSearchFormHandler = (form: any) => {
  currentParams = { ...currentParams, ...form };
  updateParams();
};

const resetSearchFormHandler = () => {
  currentParams = {};
  updateParams();
};

const add = () => {
  const path = "/common/energy/energyReport/risk_opp/add";
  router.push({ path });
};

const check = scope => {
  const {
    row: { id = "" }
  } = scope;
  if (!id) return;
  router.push({ path: "/common/energy/energyReport/risk_opp/check", query: { id } });
};

const edit = scope => {
  const {
    row: { id = "" }
  } = scope;
  if (!id) return;
  router.push({ path: "/common/energy/energyReport/risk_opp/edit", query: { id } });
};

const del = scope => {
  const {
    row: { id = "", kind = "" }
  } = scope;
  if (!id) return;
  const msg = `确定删除 ${kind} 吗？`;
  useMessageBox("delete", msg, async () => {
    await deleteRiskOpportunity({ id });
    await commonTableRef.value.queryTableData(null, true);
    PxMessage.success("删除成功！");
  });
};

const tableCloumns = ref<Array<CommonTable.TableCloumnsType>>(useTableCloumns(check));

onMounted(async () => {
  await useUpdateDomHeight(scrollbarHeight, objectModelTableRef, gap, defaultHeight);
});

onUnmounted(() => useCancelUpdateDomHeight());

const activeFlag = ref<boolean>(false);

onActivated(() => {
  if (activeFlag.value) {
    commonTableRef.value.queryTableData();
  }
  if (!activeFlag.value) {
    activeFlag.value = true;
  }
});
</script>

<template>
  <div v-loading="searchLoading" class="risk-opp">
    <div class="risk-opp-search">
      <commonSearch
        v-if="searchOption?.length"
        ref="commonSearchRef"
        v-model:loading="searchLoading"
        :row-num="4"
        :operationSpan="3"
        :option="searchOption"
        @submit="submitSearchFormHandler"
        @reset="resetSearchFormHandler"
      />
    </div>
    <div class="risk-opp-btns">
      <px-button v-has="'ALL_ENERGY_ENERGYREPORT_RISK_OPP_ADD_BTN'" type="primary" @click="add">新增</px-button>
    </div>
    <div ref="objectModelTableRef" class="risk-opp-table">
      <commonTable
        ref="commonTableRef"
        indexNeed
        :operationOptions="operationOptions"
        :tableCloumns="tableCloumns"
        :height="scrollbarHeight"
        :axiosApi="queryRiskOpportunityList"
        :params="params"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.risk-opp {
  padding: 16px;
  padding-bottom: 0;
  width: 100%;
  background-color: #fff;

  .risk-opp-search {
    width: 100%;
  }

  .risk-opp-btns {
    display: flex;
    align-items: center;
    margin-top: 16px;
  }

  .risk-opp-table {
    margin-top: 16px;
  }
}
</style>
